<template>
  <div class="WarehouseDif">
    <div class="wd-top">
      <el-button @click="showNewbuild" type="primary" icon="el-icon-plus"
        >新建</el-button
      >
      <el-button @click="showpwd1" icon="el-icon-edit-outline">改单</el-button>
      <el-button v-print="'#pit'" icon="el-icon-printer">列印</el-button>
    </div>
    <div>
      <el-table
        id="pit"
        border
        :data="tableData"
        height="68vh"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '26px' }"
        highlight-current-row
        tooltip-effect="dark"
        @row-click="rowClick"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="50px">
        </el-table-column>
        <el-table-column prop="sequence" label="仓库盘点序号">
        </el-table-column>
        <el-table-column prop="receiptsNumber" label="单号"> </el-table-column>
        <el-table-column prop="warehouseNo" label="仓库编号"> </el-table-column>
        <el-table-column prop="kindsNumber" label="货号" width="160px">
        </el-table-column>
        <el-table-column prop="sellingPrice" label="售价"> </el-table-column>
        <el-table-column prop="differNumber" label="盘差数量" width="100px">
        </el-table-column>
        <el-table-column prop="differMoney" label="盘差金额"> </el-table-column>
        <el-table-column prop="differTime" label="盘差日期"> </el-table-column>
        <el-table-column prop="curency" label="币种"> </el-table-column>
        <el-table-column prop="operator" label="操作员" width="100px">
        </el-table-column>
        <el-table-column prop="enteringTime" label="录入日期" width="160px">
        </el-table-column>
        <el-table-column prop="status" label="修改状态"> </el-table-column>
      </el-table>
    </div>

    <!-- 改单密码验证 -->
    <verify-password
      :style="{ display: showpwd }"
      @closepwd="closepwd"
      @showRevision="showRevision"
    >
    </verify-password>

    <change-order
      :style="{ display: showChange }"
      @closeChange="closeChange"
      @saveChange="saveChange"
      :detailInfo="details"
    >
    </change-order>

    <!-- 点击新建的弹出的组件 -->
    <new-build
      @changeParentComponentTableData="changeParentComponentTableData"
      :style="{ display: showNew }"
      @saveNew_build="saveNew_build"
      @keepSave="keepSave"
      @inpNumChange="
        () => {
          this.inpList = this.getInput()
        }
      "
      @closeNew_build="closeNew_build"
    >
    </new-build>

    <!-- 分頁 -->
    <foot-view
      class="footView"
      :pagesNum="pagesNum"
      :hasPagination="true"
      :pageSize="limit"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <div slot="text">
        <el-popover
          placement="top-start"
          width="120"
          max-height="100px"
          trigger="click"
        >
          <!-- <el-checkbox-group v-model="selectHeaderList" >
            <el-checkbox 
              v-for="i in headerList" 
              :label="i.value" 
              :key="i.value"
              style="margin-bottom:7px"></el-checkbox>
          </el-checkbox-group> -->
          <i slot="reference" class="el-icon-date"> 表头配置</i>
        </el-popover>
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>
  </div>
</template>

<script>
// import tcpServer from '../../../network/tcpServer'
// import TCPClient from '../../../network/TCPClient'
import footView from '../../../components/FootView'
import newBuild from './childComps/NewBuild'
import verifyPassword from '../../../components/VerifyPassword'
import changeOrder from './childComps/ChangeOrder'
import { postNewbuild, getDifference } from '../../../network/warehouse'
import today from '../../../components/mixins/today'
import enterUp from '../../../components/mixins/enterUp'
// import serve from '../../../network/serve'
export default {
  name: 'warehouse_difference_wd',
  mixins: [today, enterUp],
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
  },
  data() {
    return {
      sonTableData: [],
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
      jxQuarter: null,
      // jxQuarter: document.cookie.match(
      //   new RegExp('jxQuarter' + name + '=([^;]*)(;|$)')
      // )[1],
      inpList: [],
      //数据总条数
      dataLen: 0,
      //总页码数
      pagesNum: 0,
      //每页显示条数
      limit: 20,
      // 当前页码
      currentPage: 1,
      showNew: 'none',
      showpwd: 'none',
      showChange: 'none',
      tableData: [],
      details: {}
    }
  },
  components: {
    newBuild,
    footView,
    verifyPassword,
    changeOrder
  },
  methods: {
    // 监听子组件的方法，拿到子组件传过来的表格数据，来更改父组件的表格数组
    changeParentComponentTableData(data) {
      this.tableData = data
    },
    handleSizeChange(val) {
      //每页多少条
      this.limit = val
      //总页码
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
      let params = {
        limit: this.limit,
        page: this.currentPage
      }
      // this._getDifference(params)
    },
    handleCurrentChange(val) {
      //当前页
      this.currentPage = val
      let params = {
        limit: this.limit,
        page: val
      }
      // this._getDifference(params)
    },

    rowClick(e) {
      this.details = e
      console.log(e)
    },

    // _getDifference(params){
    //   // this.tableData = []
    //   getDifference(params).then(res=>{
    //   console.log(res.data)
    //   this.tableData = res.data.data
    // })
    // },

    showNewbuild() {
      this.showNew = 'block'
      // this.tableData = []
    },
    // 监听子组件点击右上角关闭的时候，触发的函数
    closeNew_build() {
      this.showNew = 'none'
    },
    //新建保存
    saveNew_build(data) {
      this.showNew = 'none'
      postNewbuild(JSON.stringify(data)).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.tableData = res.data.data
          // this._getDifference({limit: this.limit,page: this.currentPage})
        } else {
          this.$message.error({
            message: '保存失败'
          })
        }
      })
    },
    //继续录入
    keepSave(data) {
      postNewbuild(JSON.stringify(data)).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          // this._getDifference({limit: this.limit,page: this.currentPage})
        } else {
          this.$message.error({
            message: '保存失败'
          })
        }
      })
    },

    //改单密码框
    showpwd1() {
      console.log(this.details.id)
      if (this.details.id == undefined) {
        this.$alert('请选择一条数据进行修改', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.showpwd = 'block'
      }
    },
    closepwd() {
      this.showpwd = 'none'
    },
    showRevision() {
      this.showpwd = 'none'
      this.showChange = 'block'
    },
    //改单保存
    saveChange(data) {
      this.showChange = 'none'
      postNewbuild(data).then((res) => {
        console.log(res.data)
        // this._getDifference()
        if (res.data.code == 200) {
          this.$alert('改单保存成功', '提示', {
            confirmButtonText: '确定'
          })
        }
      })
    },

    closeChange() {
      this.showChange = 'none'
    }
  },
  watch: {
    dataLen(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
      console.log(this.pagesNum)
    }
    // limit(a,b){
    //   this.pagesNum = Math.ceil(this.dataLen / this.limit)
    // }
  }
}
</script>
<style scoped>
.WarehouseDif {
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 94.5vh;
  position: relative;
}
.wd-top {
  padding: 15px 0;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
</style>
